<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <!-- 引入组件库 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        h3 a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<h3>
    <a href="">激光打印机</a>
</h3>
<div id="users">
    </el-dialog>
    <el-row>
        <el-input v-model="input"  placeholder="请输入订单编号" style="width: 280px"></el-input>
        生产状态： <el-radio v-model="radio" label="1">已生产</el-radio>
        <el-radio v-model="radio" label="2" >未生产</el-radio>
        <el-button type="primary" icon="el-icon-search" @click="chaxun">查询</el-button><br>
        <el-button type="primary" @click="showTreeDialog2">自动分配</el-button>
        <el-button type="success"  @click="showTreeDialog" >手动分配</el-button>
        <el-button type="danger" icon="el-icon-delete" @click="delAll">批量删除</el-button>
    </el-row>
        <!--        和user对象对应-->
    <el-dialog title="打印机信息" :visible.sync="dialogFormVisible">
        <el-table

                @selection-change="selectTableB"
                :data="tprinters"
                ref="roleTable"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="打印机编号"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <!--scope.row.id 固定搭配-->
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="服务器"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.pnum }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="描述"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.pserver }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="可打型号"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.pdesctib }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="IP地址"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.pip }}</span>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="modifyLasers">确 定</el-button>
        </div>
    </el-dialog>
    <!--:data="users"接收集合-->
    <el-table
            @selection-change="selectTableA"
            ref="currentRole"
            tooltip-effect="dark"
            :data="printers"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="订单编号"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <!--scope.row.id 固定搭配-->
                <span style="margin-left: 10px">{{ scope.row.order2.orderId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="祖码"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.order2.zumaId }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="开始时间"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.order2.productPlanTime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="结束时间"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.order2.productPlanOvertime }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="状态"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.lstatus }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="打印机"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span v-if="scope.row.lprinter != '' " style="margin-left: 10px">{{ scope.row.tprinter.pnum }}</span>
            </template>
        </el-table-column>
    </el-table>
    <!--    //分页的下角标-->
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="current"
            @current-change="currentChange">
    </el-pagination>
</div>


<script>
    new Vue({
        el:"#users",
        data(){
            return{
                radio:0,
                // 修改角色模态框
                dialogFormVisible: false,
                // 权限模态框
                dialogTreeVisible: false,
                //集合
                total:0,
                current:1,
                pageSize:10,
                printers: [],
                number:0,
                currentRow:null,
                tprinter:[],
                currentRole:[],
                clearSelection:{},
                // num: 0,
                // 配置子节点和节点的显示属性
                defaultProps:{
                    label: 'name'
                },

                selectAll:null,
                input:"",
                tprinters:[],
                printer:{}
            }

        },
        methods:{
            showTreeDialog2(){
                // 看是否选中角色
                if(this.currentRole.length != 0){
                    let ids=new Array();
                    this.currentRole.forEach(select=>{
                        ids.push(select.id)
                    });
                    axios.put("/Lasers2/" + ids).then(res => {
                        this.loadUsers();

                    })

                }else {
                    this.$message("请选择订单");
                }
            },


            showTreeDialog(){
                // 看是否选中角色
                if(this.currentRole.length != 0){
                    this.dialogFormVisible = true;
                    axios.get("/TPrinters")
                        .then(res => {
                            this.tprinters=res.data;
                        })
                }else {
                    this.$message("请选择订单");
                }
            },
            //批量修改
            modifyLasers(){
                let ids=new Array();
                this.currentRole.forEach(select=>{
                    ids.push(select.id)
                });
                ids.push(this.printer.id);
                axios.put("/Lasers/" + ids).then(res => {
                    this.loadUsers();
                    this.dialogFormVisible = false;
                })
            },
           // 选中的角色行
            selectTableA(selection){
                this.currentRole = selection;
                // 全部取消
                // this.$refs.roleTable.clearSelection();
                // 选中当前行
                // this.$refs.roleTable.toggleRowSelection(this.currentRole);
            },
            selectTableB(selection){

                this.printer = selection[0];
                console.log(this.printer)
            },

            printOrder(){
                this.operationTime = new Date().toLocaleString();
                if(this.currentOrder){
                    this.dialogFormVisible = true;
                }else {
                    this.$message({
                        type: "info",
                        message: "请选择要打印的订单"
                    });
                }
            },



//
            loadUsers(){
                axios.get("/Laser/page?current=" + this.current)
                    .then(res =>{
                        this.printers = res.data.data;
                        this.total = res.data.count;
                        this.current = res.data.current;
                        console.log(this.printers);
                    })
            },
            // 通过订单编号查询激光码
            chaxun() {
                if(this.radio==1 || this.radio==2){
                    console.log("radio是"+this.radio);
                    axios.get("/Laser2/page/"+this.radio)
                        .then(res =>{
                            this.printers = res.data;
                            // this.total = res.data.total;
                            // this.current = res.data.current;
                            console.log(this.printers);
                        })
                    this.dialogFormVisible = false;
                }else{
                    if(this.input == ""){
                        this.loadUsers();
                    }else {
                        axios.get("/Laser?input=" + this.input)
                            .then(res => {
                                this.printers = res.data;
                                console.log(res.data)
                            });
                        this.dialogFormVisible = false;
                    }
                }
            },

            currentChange(current){
                this.current=current;
                this.loadUsers();
            },
            handleEdit(index, row) {
                this.user=JSON.parse(JSON.stringify(row));
                //开模态框
                this.dialogFormVisible=true;
                this.number=1;
            },
            // handleDelete(index, row) {
            //     axios.delete("/TPrinter/" + row.id)
            //         .then(res =>{
            //             if(res.data=="ok"){
            //                 this.loadFunctions();
            //             }
            //         })
            // },
            delAll() {
                let ids=new Array();
                console.log(this.selectAll)
                this.currentRole.forEach(select=>{
                    console.log(select.id)
                    ids.push(select.id)
                })
                axios.delete("/Lasers/" + ids)
                    .then(res =>{
                        if(res.data=="ok"){
                            this.loadUsers();
                        }
                    })
            },

            //关闭模态框时 清空数据
            closeDialog(){
                this.tprinter =  [];
            },

            // saveUsers(){
            //     let u = JSON.parse(JSON.stringify(this.tprinter));
            //     if(this.number == 0){
            //         axios.post("/TPrinter",u)
            //             .then(res =>{
            //                 if(res.data=="ok"){
            //                     this.dialogFormVisible=false;
            //                     this.loadFunctions();
            //                 }
            //             });
            //     }else{
            //         axios.put("/TPrinter",u)
            //             .then(res =>{
            //                 if (res.data == "ok"){
            //                     this.dialogFormVisible=false;
            //                     this.loadUsers();
            //                 }
            //             })
            //     }
            // },
        },
        mounted(){
            this.loadUsers();

        }
    })
</script>
</body>
</html>